<template>
  <div class="music-play">
    <audio
      ref="audio"
      @play="handlePlay"
      @pause="handlePause"
      autoplay
      controls
      :src="bitrate.show_link"
    ></audio>
  </div>
</template>

<script>
import {  mapState } from "vuex";
export default {
  name: "MusicPlay",
  computed: {
    ...mapState({
      bitrate: "bitrate",
      songinfo: "songinfo",
      processTime: "processTime",
    }),
  },
   mounted() {
    this.$refs.audio.addEventListener("timeupdate", () => {
      // console.log(this.$refs.audio.currentTime);
      this.$store.commit('changeCurrentTime',{currentTime:this.$refs.audio.currentTime})
    });
  },
    methods: {

    handlePlay() {
      console.log("播放了");

      const imgStyle={
        'animation-play-state':'running'
      }
      this.$store.commit('changeImgStyle',{imgStyle})
    },
    handlePause() {
      console.log("暂停");

      const imgStyle={
        'animation-play-state':'paused'
      }
      this.$store.commit('changeImgStyle',{imgStyle})
    },
    },
      watch:{
    processTime(){
      this.$refs.audio.currentTime = this.processTime
    }
  }
}
</script>

<style scoped lang='less'>
.music-play {
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: rgb(255, 0, 200);
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>